<template>
<div>
    <logos ></logos>
  <div class="match-box">
    <div class="navSbu w1200">
      <crumbs oneNav='研究生电子设计竞赛' :twoNav='twoNav' :rightFlag='false'  ></crumbs>
    </div>
    <div class="content-box w1200" >
        <div class="tabs-box">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="大赛介绍" name="first">
                </el-tab-pane>
                <el-tab-pane label="参赛作品" name="second">
                </el-tab-pane>
                <el-tab-pane label="大赛流程" name="third">
                </el-tab-pane>
                <el-tab-pane label="获奖作品" name="last">
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <div>
    <baseTransition>
      <template v-if='activeName=="first"'>
        <keep-alive>
          <present ></present>
        </keep-alive>
      </template>
      <template v-if='activeName=="second"'>
        <keep-alive>
        <works v-if='activeName=="second"&&!secondsun' @showDetail='showDetail' ></works>
        </keep-alive>
        <!-- allDataList.participatingWorksList -->
      </template>
      <template v-if='activeName=="third"'>
          <process ></process>
      </template>
      <template v-if='activeName=="last"'>
        <awards @showDetail='showDetail' v-if='activeName=="last"&&!secondsun' ></awards>
      </template>
      </baseTransition>
       <baseTransition>
          <entriesdetails v-if='secondsun'></entriesdetails>
       </baseTransition>
    </div>
  </div>
  </div>
</template>
           
<script>
import crumbs from '../common/crumbs'
import present from './present.vue'
import process from './process.vue'
import works from './works.vue'
import awards from './awards.vue'
import entriesdetails from '../details/entriesdetails.vue'
//封装的tabs过渡切换
import baseTransition from '../base/baseTransition.vue'
import API from '../../api/content.js'
import logos from '../common/logo.vue'
export default{
  components:{ crumbs ,present , process, works, awards,entriesdetails,baseTransition,logos},   
  data() {
    return {
      activeName:'first',
      twoNav:'大赛介绍',
      // secondsun:false,
      dateilName:'',
      allDataList:[],
      articleType:this.$route.query.articleType||'3'
    }
  },
  mounted() {
    this.getmenu()
    this.activeName = this.$route.query.activeName || 'first'
    this.$store.commit('setPath',this.$route.path)
  },
  computed:{
    secondsun:function(){
      return this.$store.state.detailFlag
    }
  },
  methods: {
    handleClick(tab, event) {
        this.twoNav=tab.label
        this.$store.commit('showDetail',false)
    },
    async getmenu(){
      let {data:res} = await API.list({articleType:this.articleType})
      this.allDataList = res
    },
    showDetail(item){
      this.dateilName = item
    },
  },
}
</script>
<style lang='scss'>
  .match-box{
    margin-top: 59px;
    position: relative;
    .navSbu{
      
    }
    .tabs-box{
            // margin-top: -59px;
            position: absolute;
            top: 0px;
            right: 0px;
            transform: translateX(-94%);
        }
        .el-tabs__nav{
            float: right;
        }
        .el-tabs__item {
            padding: 0 20px;
            height: 59px;
            line-height: 59px;
            font-size: 16px;
        }
        .el-tabs__nav-wrap::after {
            background-color: transparent !important;
        }
        .el-tabs__item:hover,
        .el-tabs__item.is-active,
        .el-tabs__active-bar{
            color: #3246c4;
        }
        .el-tabs__active-bar{
            background-color: #3246c4;
        }
        .el-tabs__content{
            overflow: inherit;
        }
  }
</style>